<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="vo.*"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学生管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js" charset="utf-8"></script>
<style type="text/css">
	 .layui-table th{font-size:18px;
	 }
	 .layui-table td{
	 font-size:18px;
	 }
</style>


</head>
<body>
	<table class="layui-hide" id="test" lay-filter="test" ></table>
	<script type="text/html" id="barDemo">
     <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="addStudent">添加学生</button>
  </div>
</script>
 
	<script>
layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#test'
    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
    ,defaultToolbar: ['filter', 'exports', 'print']
    ,title: '用户数据表'
    ,cols: [[ //标题栏
	      {field:  'stuno', title: '学号', width: 130, sort: true }
	      ,{field: 'stuname', title: '姓名', width: 160}
	      ,{field: 'stusex', title: '性别', width: 80}
	      ,{field: 'stutel', title: '联系方式', width: 180}
	      ,{field: 'stuemail', title: '邮箱', width: 250}
	      ,{field: 'stuclass', title: '班级', width: 140}
	      ,{field: 'studept', title: '学院', width: 150}
	      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:225}
	    
	    ]]
  ,data: 
      ${op_stu_json}
    ,page: true
  });
  
  //头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event)
    	{
    		case 'addStudent':
    		{  	
    			layer.open({
	    			type: 2,
	    			title:"添加学生",
	    			offset: 'auto',
	    			area:['500px','500px'],
	    			content: '../jsp/student/stu_form.jsp?flag=3', //flag=3为添加学生
	    			end:function(){
						location.reload();
	    			}
	  			}); 
    	}
      	break;
      //自定义头工具栏右侧图标 - 提示
      case 'LAYTABLE_TIPS':
        layer.alert('这是工具栏右侧自定义的一个图标按钮');
      	break;
      };
  });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data;
    //console.log(obj)
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
	  		layer.open({
		    type: 2,
		    title:"删除",
		    offset: 'auto',
		    area:['500px','500px'],
		    content: '../jsp/op/DeleteStu.jsp?flag=1'+"&stuno="+data.stuno,//flag=1为删除学生
		    end:function(){
			location.reload();
		    }
		  }); 
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){

	layer.open({
	    type: 2,
	    title:"修改",
	    offset: 'auto',
	    area:['500px','500px'],
	    content: '../jsp/student/stu_form.jsp?flag=2&stuno='
		    +data.stuno+
		    '&stuname='+data.stuname+
		    '&stusex='+data.stusex+
		    '&stutel='+data.stutel+
		    '&stuemail='+data.stuemail+
		    '&stuclass='+data.stuclass+
		    '&studept='+data.studept
		    ,
		    //flag=2为修改学生
	    end:function(){
		location.reload();
	    }
	  });   
    }
  });
});
</script>

</body>
</html>